<template>
  <section class="chart">
    <!--图标-->
    <el-row>
      <el-col :span="24">
        <div id="chartMap" style="width:100%; height:400px;"></div>
      </el-col>
    </el-row>
  </section>
</template>

<script>
  //	import util from '../../common/util'
  import echarts from 'echarts'
  import 'echarts/map/js/china'
  import 'echarts/map/json/china.json'

  export default {
    data() {
      return {
        chartMap: null,
      }
    },
    methods: {
      randomData: function () {
        return Math.round(Math.random() * 1000);
      }
    },
    mounted: function () {
      this.chartMap = echarts.init(document.getElementById('chartMap'));
      /*this.chartMap.showLoading();
      this.chartMap.hideLoading();*/
      this.chartMap.setOption({
        title: {
          text: '数据中心',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['数据中心']
        },
        visualMap: {
          min: 0,
          max: 2500,
          top: 'bottom',
        },
        series: [
          {
            name: '数据中心',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: [
              {name: '北京', value:1},
              {name: '广东', value: 2},
            ]
          },

        ]
      });
      this.chartMap.on("click",params=>{
        console.log(params);
        if(params.value>0) this.$router.push({ path: `/page52`, query: { id: '123' }});
      })
    }
  }
</script>

<style scoped>

</style>